<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>3d动画</title>
    <style>
        :root {
            --size: 500px;
            --d: 100px;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            height: 100vh;
            background-color: #000;
            color: aqua;
            font-size: 28px;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .loader {
            width: var(--size);
            height: var(--size);
            /* border: 1px solid red; */
            display: flex;
            justify-content: center;
            align-items: center;
            flex-direction: column;
            animation: tiltSpin 4s linear infinite;
        }

        .loader,
        .loader-ring {
            transform-style: preserve-3d;

        }

        .loader-ring {
            font-size: 28px;
            position: relative;
            width: 21px;
            height: 42px;
            animation: spin 2s linear infinite;
        }

        .loader-ring:nth-child(2) {
            animation-direction: reverse;
        }

        .loader-sector {
            font-weight: 600;
            text-transform: uppercase;
            position: absolute;
            top: 0;
            left: 0;
            text-align: center;
            transform: translateZ(var(--d));
        }

        .loader-sector,
        .loader-sector:empty::before {
            display: inline-block;
            width: 100%;
            height: 100%;
        }

        .loader-sector:empty::before {
            content: '';
            background: linear-gradient(transparent 45%, currentColor 45% 50%, transparent 55%);
        }

        .loader-sector:nth-child(1) {
            transform: rotateY(0deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(2) {
            transform: rotateY(12deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(3) {
            transform: rotateY(24deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(4) {
            transform: rotateY(36deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(5) {
            transform: rotateY(48deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(6) {
            transform: rotateY(60deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(7) {
            transform: rotateY(72deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(8) {
            transform: rotateY(84deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(9) {
            transform: rotateY(96deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(10) {
            transform: rotateY(109deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(11) {
            transform: rotateY(120deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(12) {
            transform: rotateY(132deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(13) {
            transform: rotateY(144deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(14) {
            transform: rotateY(156deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(15) {
            transform: rotateY(168deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(16) {
            transform: rotateY(180deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(17) {
            transform: rotateY(192deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(18) {
            transform: rotateY(204deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(19) {
            transform: rotateY(216deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(20) {
            transform: rotateY(228deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(21) {
            transform: rotateY(240deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(22) {
            transform: rotateY(252deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(23) {
            transform: rotateY(264deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(24) {
            transform: rotateY(276deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(25) {
            transform: rotateY(288deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(26) {
            transform: rotateY(300deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(27) {
            transform: rotateY(312deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(28) {
            transform: rotateY(324deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(29) {
            transform: rotateY(336deg) translateZ(var(--d));
        }

        .loader-sector:nth-child(30) {
            transform: rotateY(348deg) translateZ(var(--d));
        }

        @keyframes tiltSpin {
            from {
                transform: rotateY(0deg) rotateX(30deg);
            }

            to {
                transform: rotateY(1turn) rotateX(30deg);
            }
        }

        @keyframes spin {
            from {
                transform: rotateY(0deg);
            }

            to {
                transform: rotateY(1turn);
            }
        }
    </style>
</head>

<body>
    <div class="loader">
        <div class="loader-ring">
            <div class="loader-sector">l</div>
            <div class="loader-sector">o</div>
            <div class="loader-sector">a</div>
            <div class="loader-sector">d</div>
            <div class="loader-sector">i</div>
            <div class="loader-sector">n</div>
            <div class="loader-sector">g</div>
            <div class="loader-sector">.</div>
            <div class="loader-sector">.</div>
            <div class="loader-sector">.</div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
        </div>
        <div class="loader-ring">
            <div class="loader-sector">l</div>
            <div class="loader-sector">o</div>
            <div class="loader-sector">a</div>
            <div class="loader-sector">d</div>
            <div class="loader-sector">i</div>
            <div class="loader-sector">n</div>
            <div class="loader-sector">g</div>
            <div class="loader-sector">.</div>
            <div class="loader-sector">.</div>
            <div class="loader-sector">.</div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
            <div class="loader-sector"></div>
        </div>
    </div>
</body>

</html>